src/app/groups/[groupId]/reimbursement-list.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import { Reimbursement } from '@/lib/balances'
import { Participant } from '@prisma/client'

type Props = {
  reimbursements: Reimbursement[]
  participants: Participant[]
  currency: string
}

export function ReimbursementList({
  reimbursements,
  participants,
  currency,
}: Props) {
  const getParticipant = (id: string) => participants.find((p) => p.id === id)
  return (
    <div className="text-sm">
      {reimbursements.map((reimbursement, index) => (
        <div className="border-t p-4 flex justify-between" key={index}>
          <div>
            <strong>{getParticipant(reimbursement.from)?.name}</strong> owes{' '}
            <strong>{getParticipant(reimbursement.to)?.name}</strong>
          </div>
          <div>
            {currency} {reimbursement.amount.toFixed(2)}
          </div>
        </div>
      ))}
    </div>
  )
}